<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init({
				subpages: [{
					url: 'home.html',
					id: 'home.html',
					styles: {
						top: '0px',
						buttom: 'opx'
					}
				}, {
					url: 'classify.html',
					id: 'classify.html',
					styles: {
						top: '0px',
						buttom: 'opx'
					}
				}, {
					url: 'user.html',
					id: 'user.html',
					styles: {
						top: '0px',
						buttom: 'opx'
					}
				}]
			});
		</script>
	</head>

	<body>
		<div class="mui-content">
			<nav class="mui-bar mui-bar-tab">

				<a id="defaultTab" class="mui-tab-item mui-active" href="home.html">
					<span class="mui-icon mui-icon-home"></span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a class="mui-tab-item" href="classify.html">
					<span class="mui-icon-extra mui-icon-extra-class"></span>
					<span class="mui-tab-label">分类</span>
				</a>
				<a class="mui-tab-item" href="user.html">
					<span class="mui-icon mui-icon-contact"></span>
					<span class="mui-tab-label">我的</span>
				</a>
			</nav>
		</div>
	</body>

</html>
<script>
	mui.init();
	mui.plusReady(function() {
		/**  
		 * 获取本地存储中launchFlag的值  
		 * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem  
		 * 若存在，说明不是首次启动，直接进入首页；  
		 * 若不存在，说明是首次启动，进入引导页；  
		 */
		var launchFlag = plus.storage.getItem("launchFlag");
		if(launchFlag) {
			mui.openWindow({
				url: "index.html",
				id: "main",
				extras: {
					mark: "index" //额外的参数，仅仅是个标识，实际开发中不用；  
				}
			});
		} else {
			mui.openWindow({
				url: "guide.html",
				id: "guide"
			});
		}
	});

	var subpages = ['home.html', 'classify.html', 'user.html'];
	var subpage_style = {
		top: '0px',
		bottom: '51px'
	};

	var aniShow = {};

	//创建子页面，首个选项卡页面显示，其它均隐藏；
	mui.plusReady(function() {
		var self = plus.webview.currentWebview();
		for(var i = 0; i < 3; i++) {
			var temp = {};
			var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
			if(i > 0) {
				sub.hide();
			} else {
				temp[subpages[i]] = "true";
				mui.extend(aniShow, temp);
			}
			self.append(sub);
		}
	});
	//当前激活选项
	var activeTab = subpages[0];
	//选项卡点击事件
	mui('.mui-bar-tab').on('tap', 'a', function(e) {
		var targetTab = this.getAttribute('href');
		if(targetTab == activeTab) {
			return;
		}
		//更换标题
		console.log("target:" + targetTab);
		//显示目标选项卡
		//若为iOS平台或非首次显示，则直接显示
		if(mui.os.ios || aniShow[targetTab]) {
			plus.webview.show(targetTab);
		} else {
			//否则，使用fade-in动画，且保存变量
			var temp = {};
			temp[targetTab] = "true";
			mui.extend(aniShow, temp);
			plus.webview.show(targetTab, "fade-in", 300);
		}
		//隐藏当前;
		plus.webview.hide(activeTab);
		//更改当前活跃的选项卡
		activeTab = targetTab;
	});
	//自定义事件，模拟点击“首页选项卡”
	document.addEventListener("gohome", function() {
		var defaultTab = document.getElementById("defaultTab");
		//模拟首页点击
		mui.trigger(defaultTab, 'tap');
		//切换选项卡高亮
		var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
		if(defaultTab !== current) {
			current.classList.remove('mui-active');
			defaultTab.classList.add('mui-active');
		}
	});
</script>